import React, { PureComponent } from "react";
import s from "./index.scss";
import { Flex ,Icon} from "antd-mobile";

import QueueAnim from 'rc-queue-anim'
import {calculatorFlag} from 'actions/detail'
import {callApi} from 'app/utils'
import { connect } from "react-redux";
@connect(
    state => ({
     
    }),
    {
      calculatorFlag
    }
  )

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
        investAmount:0,
        P2PExpected:'0.00',
        BankExpected:'0.00',
    };
    this.send = this.send.bind(this)
  }
  
  componentDidMount() {
      console.log(this.props.loanId)
   
    
  }
   //销毁时解绑事件
  componentWillUnmount() {
    //重写组件的setState方法，直接返回空
    this.setState = (state,callback)=>{
      return;
    };  
  }
  close(flag){
    let {calculatorFlag} = this.props
    calculatorFlag(flag)
  }
  send(id){
    let that = this
    if(localStorage.getItem('userData')!=undefined&&localStorage.getItem('userData')!=null){
        let userData = JSON.parse(localStorage.getItem("userData"))
        let {investAmount} = this.state
        callApi('/loan/invest/profitcalculator',{token:userData.token,loanId: id,investAmount:investAmount}, 'POST').then((data)=>{
            that.setState({P2PExpected:data.data.P2PExpected,BankExpected:data.data.BankExpected})
        })
    }

  }
  numIpt(e){
    console.log(e.target.value)
    this.setState({
        investAmount: e.target.value
    })
  }

  render() {
    console.log(this.props.loanId)
   let {loanId,annualrate,termcount,termUnit} = this.props.profile;
   let {P2PExpected,BankExpected} = this.state
    return (
      <div className={`${s.CalculatorBox}`}>
        <QueueAnim type="bottom" leaveReverse>
            <Flex className={`${s.closeBox}`}  key="a">
                <Icon type="cross" color="#fff" onClick={this.close.bind(this,false)}/>
            </Flex>
            <Flex className={`${s.one}`}  key="b">
                <Flex.Item className={`${s.child} ${s.left}`}>
                    <div className={`${s.top}`}><span className={`${s.bigFont}`}>{annualrate}</span><span className={`${s.smallFont}`}>%</span></div>
                    <div className={`${s.bot}`}>年化利率</div>
                </Flex.Item> 
                <Flex.Item className={`${s.child}`}>
                    <div className={`${s.top}`}>{termcount}{termUnit}</div>
                    <div className={`${s.bot}`}>项目期限</div>
                </Flex.Item> 
            </Flex>   
            <div className={`${s.tip}`}>
                收益&nbsp;&nbsp;(元)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>  
            <Flex className={`${s.two}`} direction="column">
                    <Flex className={`${s.child}`}>
                        <Flex.Item className={`${s.left} ${s.redBG} flex2`} style={{paddingTop:'0.05rem'}}>安<br/>心<br/>投</Flex.Item>
                        <Flex.Item className={`${s.right} flex8`}>{P2PExpected}</Flex.Item>
                    </Flex> 
                    <Flex className={`${s.child}`}>
                        <Flex.Item className={`${s.left}  ${s.blueBG} flex2`}>银<br/>行<br/>活<br/>期</Flex.Item>
                        <Flex.Item className={`${s.right} flex8`}>{BankExpected}</Flex.Item>
                    </Flex> 
                    <Flex className={`${s.child2}`}>
                        <Flex.Item className={`${s.left} flex8`} style={{height:'100%'}}><input style={{border:0}} placeholder="请输入金额" type="number" onChange={this.numIpt.bind(this)}/></Flex.Item>
                        <Flex.Item className={`${s.right} flex2`} onClick={this.send.bind(this,loanId)}>计算</Flex.Item>
                    </Flex> 
            </Flex>
        </QueueAnim>
      </div>
    );

  }

}
